<template>
	<view class="box">
		<view class="wrap">
			<view class="lin_b">
				<view class="top">
					<text>商品体验</text>
					<u-rate :count="count" size="26" v-model="goodsScore" active-color="#FFC300" :minCount="1"></u-rate>
				</view>
				<view class="top">
					<text>物流体验</text>
					<u-rate :count="count" size="26" v-model="logisticsScore" active-color="#FFC300" :minCount="1"></u-rate>
				</view>
				<view class="top">
					<text>服务体验</text>
					<u-rate :count="count" size="26" v-model="serviceScore" active-color="#FFC300" :minCount="1"></u-rate>
				</view>
			</view>
			<view class="ipt">
				<!-- #ifdef H5|| MP-WEIXIN -->
				<u--textarea class="textarea" v-model="content" placeholder="请输入内容" count></u--textarea>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<u--textarea class="textarea" v-model="content" placeholder="请输入内容"></u--textarea>
				<!-- #endif -->
			</view>
			<uni-file-picker class="up" limit="3" @select="select" @success="success" @progress="progress"
				:auto-upload="true" :image-styles="imageStyles" fileMediatype="image" mode="grid"
				v-model="imageValue"></uni-file-picker>
		</view>
		<view class="orderwrap">
			<view class="orderitem">
				<view class="itemtop">
					<view class="name">
						<image style="width: 38rpx;height: 38rpx;border-radius: 50%;margin-right: 10rpx;"
							:src="info.shop_seller.logo" mode="aspectFill"></image> {{info.shop_seller.name}}
					</view>
				</view>
				<view class="itemcenter"  >
					<image :src="info.image" mode="aspectFill"></image>
					<view class="itemcenterright">
						<view class="itemcenterrightitem">
							{{info.goods_name}}
						</view>
						<view class="itemcenterrightitem">
							<text class="textone">数量X{{info.num}}</text>
						</view>
						<view class="itemcenterrightitem">
							￥{{info.price}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btnwrap">

			<view class="next" @click="uploadImages()">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseURL
	} from "../../utils/request.js"
	import {
		detailinfo,
		addorderEvaluat
	} from "../../api/order.js"
	export default {
		data() {
			return {
				count: 5,
				value: 5,
				goodsScore:5,
				logisticsScore:5,
				serviceScore:5,
				content: "",
				imageValue: [],
				imagelist: [],
				imageStyles: {
					width: 100,
					height: 100,

				},
				id: "",
				info: {
					detail: {
						image: ""
					},
					address: {},
					shop_seller: {}

				}
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getinfo()

		},

		methods: {
			submit() {



			},
			getinfo() {
				detailinfo({
					id: this.id
				}).then(res => {
					this.info = res.data
				})
			},
			goevaluate() {
				uni.navigateTo({
					url: "/pageOrder/aboutorder/evaluate"
				})
			},
			select(e) {
				this.imageValue.push({
					path: e.tempFilePaths[0],
					url: e.tempFilePaths[0],
					name: ''
				})
				// e.tempFilePaths.forEach(filePath => {
				// 	this.imageValue.push({
				// 		path: filePath,
				// 		url: filePath,
				// 		name: ''
				// 	});
				// });
				console.log('选择文件：', e)
				console.log(this.imageValue, "我要看")
			},
			progress(e) {
				console(e, "上传中")
			},
			success(e) {
				console.log(e, "ssss")
				console.log('上传成功')
			},
			// up() {
			// 	const tempFilePaths = e.tempFilePaths[0];

			// },
			submit() {
				uni.navigateTo({
					url: "/pageOrder/aboutorder/applyaftersalethree"
				})
			},
			async uploadImages() {
				try {
					// 遍历 this.imageValue 中的图片路径，逐个上传
					for (const image of this.imageValue) {
						await this.uploadImage(image.path);
					}

					// 所有图片上传完成后，调用 applyrefund
					console.log("所有图片上传完成，开始调用 applyrefund");
					
						addorderEvaluat({
							detail_id: this.id,
							content: this.content,
							images: this.imagelist,
							goods_score: this.goodsScore,
							logistics_score: this.logisticsScore,
							service_score: this.serviceScore,
						}).then(res => {
							if (res.code == 1) {
								setTimeout(() => {
								uni.redirectTo({
									url:"/pageOrder/aboutorder/orderlist"
								})
								}, 1000)
							}
							uni.$u.toast(res.msg)
						})
				
				} catch (error) {
					console.error("上传图片时发生错误", error);
				}
			},
			async uploadImage(imagePath) {

				console.log(`开始上传图片: path=${imagePath}`);

				// 将图片路径转化为 uni-app 的临时文件路径
				try {
					const imageInfo = await uni.getImageInfo({
						src: imagePath
					});
					console.log(imageInfo, "ssssssssss")
					const tempFilePath = imageInfo[1].path;
					console.log(`获取到的临时文件路径: ${tempFilePath}`);

					if (!tempFilePath) {
						console.error("获取临时文件路径失败，tempFilePath 为 undefined");
						return;
					}

					console.log(`上传图片: path=${imagePath}`);

					// 上传临时文件到服务器
					await new Promise((resolve, reject) => {
						uni.uploadFile({
							url: baseURL + `shop/common/upload`,
							filePath: tempFilePath,
							name: 'file',
							header: {
								"ba-user-token": uni.getStorageSync("token") || ''
							},
							success: (res) => {
								console.log(res, "上传成功");
								const img = JSON.parse(res.data).data.full_url;
								if (img) {
									this.imagelist.push({
										img
									});
								}
								console.log(this.imagelist, "--------------------");
								console.log(JSON.parse(res.data));
								resolve(res);
							},
							fail: (err) => {
								console.error("上传失败", err);
								reject(err);
							}
						});
					});

					console.log(`图片上传完成: path=${imagePath}`);
				} catch (error) {
					console.error("获取图片信息失败", error);
				}
			}
		}
	}
</script>

<style lang="scss">
	.box {
		width: 750rpx;
		height: 100vh;
	}

	.wrap {
		width: 690rpx;
		min-height: 488rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;

	.lin_b{
		border-bottom: 2rpx solid #F2F2F2;
		.top {
			width: 660rpx;
			height: 80rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
		
			>text {
				font-weight: 700;
				font-size: 30rpx;
				color: #3D3D3D;
				margin-right: 30rpx;
			}
		}
	}

		.ipt {
			width: 660rpx;
			margin: 0 auto;
			margin-top: 20rpx;

			.textarea {
				width: 660rpx;
				height: 240rpx;
				margin: 0 auto;
				border: none;
			}
		}

		.up {
			margin-left: 24rpx;
		}
	}

	.main {
		width: 690rpx;
		min-height: 190rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 20rpx;

		.name {
			padding-top: 36rpx;
			margin-left: 24rpx;
			display: flex;
			align-items: center;

			.tag1 {
				width: 74rpx;
				height: 36rpx;
				background: #66B250;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				line-height: 36rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-left: 16rpx;
			}

			.tag2 {
				width: 74rpx;
				height: 36rpx;
				background: #65A3FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				line-height: 36rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-left: 16rpx;
			}
		}

		.address {
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			margin: 0 auto;
			margin-left: 24rpx;
			margin-right: 48rpx;
			margin-top: 24rpx;
		}
	}

	.orderwrap {
		width: 750rpx;
		margin-top: 40rpx;

		.orderitem {
			width: 690rpx;
			min-height: 280rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 0 auto;
			padding-bottom: 30rpx;

			.itemtop {
				display: flex;

				.name {
					margin-top: 38rpx;
					width: 500rpx;
					margin-left: 24rpx;

				}

				.tag {
					margin-top: 38rpx;
					margin-left: 24rpx;
					width: 96rpx;
					height: 42rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #F63418;
					font-weight: 400;
					font-size: 24rpx;
					color: #F63418;
					text-align: center;
					line-height: 42rpx;
				}

				.tag2 {
					margin-top: 38rpx;
					margin-left: 24rpx;
					width: 96rpx;
					height: 42rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #999999;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					text-align: center;
					line-height: 42rpx;
				}
			}

			.itemcenter {
				height: 140rpx;
				margin-top: 30rpx;
				margin-left: 24rpx;
				display: flex;

				>image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}

				.itemcenterright {
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.itemcenterrightitem {
						// margin-top: 10rpx;
						width: 450rpx;
						// margin-top: 10rpx;
						white-space: nowrap;         /* 强制文本不换行 */
						    overflow: hidden;           /* 隐藏溢出部分 */
						    text-overflow: ellipsis;    /* 显示省略号 */
						color: #333;
						.textone {
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
						}

						.texttwo {
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
							margin-left: 34rpx;
						}
					}
				}
			}

		}
	}

	.wrap {
		width: 690rpx;
		min-height: 398rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		padding-bottom: 20rpx;
	}

	.tit {
		padding-top: 32rpx;
		margin-left: 24rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
	}

	.item {
		display: flex;
		align-items: center;
		margin-left: 24rpx;
		justify-content: space-between;
		margin-right: 40rpx;
		margin-top: 24rpx;

		.name {
			font-weight: 400;
			font-size: 28rpx;
			color: #A7A4AD;
		}

		.time {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.btnwrap {
		width: 750rpx;
		height: 136rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.next {
			width: 680rpx;
			height: 80rpx;
			background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
			border-radius: 190rpx 190rpx 190rpx 190rpx;
			text-align: center;
			line-height: 80rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}
	/* #ifdef MP-WEIXIN */
	.u-border{
		border: none;
	}
	.file-picker__box-content{
		margin-top: 30rpx !important;
		margin-left: 20rpx !important;
	}
	/* #endif */
	/* #ifdef MP-ALIPAY */
	/deep/ .u-textarea{
		border: none!important;
	}
	/deep/ .uni-file-picker {
		display: flex;
		margin-left: 20rpx;
		margin-top: 32rpx;
	}
	/* #endif */
</style>